<template>
  <view class="case-page">
    <text>案例</text>
    
    <!-- 原有跳转按钮：保留不变 -->
    <button @click="gotoCityExplore" class="city-btn">城市探索</button>

    <!-- 新增：跳转到新闻列表页的按钮 -->
    <button @click="goToNewsList" class="news-btn">前往新闻列表页</button>

    <!-- 新增：登录相关按钮区域 -->
    <view class="login-actions">
      <!-- 未登录时显示登录按钮 -->
      <button 
        v-if="!isLogin" 
        class="login-btn" 
        @click="goToLogin"
      >
        登录页面
      </button>

      <!-- 已登录时显示个人中心按钮 -->
      <button 
        v-else 
        class="user-btn" 
        @click="goToUserCenter"
      >
        进入个人中心
      </button>
    </view>

    <!-- 功能案例按钮区域：仅保留新增的整合页按钮 -->
    <view class="func-cases">
      <!-- 新增：天气预报整合页面按钮（保留） -->
      <button @click="toWeatherReport" class="func-btn purple">天气预报整合页</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false // 登录状态标记
    };
  },
  onLoad() {
    // 页面加载时检查登录状态
    this.checkLoginStatus();
  },
  methods: {
    // 原有方法：跳转到城市探索页面（保留不变）
    gotoCityExplore() {
      uni.navigateTo({
        url: '/pages/cityExplore/cityExplore' // 原路径不变
      });
    },

    // 跳转到新闻列表页的方法
    goToNewsList() {
      uni.navigateTo({
        url: '/pages/newsList/newList' // 新闻列表页路径
      });
    },

    // 检查登录状态（从本地缓存获取）
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo');
      this.isLogin = !!userInfo?.token; // 有token则视为已登录
    },

    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login' // 跳转到登录页
      });
    },

    // 跳转到个人中心（已登录时）
    goToUserCenter() {
      uni.navigateTo({
        url: '/pages/user/user' // 个人中心页面路径
      });
    },

    // 保留：跳转到天气预报整合页面的方法
    toWeatherReport() {
      uni.navigateTo({ url: '/pages/weatherReport/weatherReport' });
    }

    // 已删除：toChooseImage、toWeather、toDownloadImage 三个方法
  }
};
</script>

<style scoped>
.case-page {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 30rpx; /* 按钮之间的间距 */
}

/* 原有按钮样式：保持原有功能的同时美化 */
.city-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #1296db;
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* 新闻列表页按钮样式 */
.news-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ff9900;
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* 登录相关按钮样式 */
.login-actions {
  margin-top: 20rpx;
}

.login-btn, .user-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
}

.login-btn {
  background-color: #07c160;
  color: #fff;
}

.user-btn {
  background-color: #666;
  color: #fff;
}

/* 功能案例按钮区域样式 */
.func-cases {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-top: 30rpx;
}

.func-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
  color: #fff;
}

/* 保留：新增按钮的紫色样式 */
.purple {
  background-color: #722ed1;
}

/* 已删除：blue/orange/green 等三个按钮的样式 */
</style>